<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天窗口-frm</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <script type="text/javascript" src="../../script/lib-flexible.js"></script>
    <style>
        html,
        body {
            height: 100%;
            position: relative;
            background: rgba(255, 255, 255, 1);
            padding-bottom: .3rem
        }
        /*语音发送状态*/

        .record {
            box-sizing: border-box;
            position: fixed;
            z-index: 9999;
            top: 30%;
            left: 0px;
            right: 0px;
            margin: 0 auto;
            border-radius: 10px;
            padding: 16px;
            width: 50%;
            text-align: center;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .record img {
            height: 100px;
        }

        .record .upper .title {
            color: #fff;
            font-size: 15px;
            line-height: 160%;
            padding: 5px;
        }
        /*.record .release {
            display: none;
        }*/

        .record .release .title {
            color: #fff;
            font-size: 16px;
            line-height: 150%;
            padding: 5px;
            background-color: rgb(132, 52, 20, .5);
        }

        .chat {
            padding: .42rem;
            margin-bottom: 2rem;
        }

        .chat .chat-item {
            position: relative;
            width: 100%;
            margin-bottom: .42rem;
            overflow: hidden;
            display: block;
        }

        .chat .chat-header {
            text-align: center;
            margin-bottom: .42rem;
        }

        .chat .chat-header>span {
            font-size: .35rem;
            font-weight: 400;
            color: rgba(204, 204, 204, 1);
            line-height: .54rem;
            background-color: #F7F7F7;
            padding: .18rem .28rem;
            border-radius: .06rem;
        }

        .chat .chat-left {
            float: left;
        }

        .chat .chat-right {
            float: right;
        }

        .chat .chat-media {
            display: inline-block;
            max-width: 2rem;
        }

        .chat .chat-media img {
            width: 100%;
            border-radius: 50%;
        }

        .chat .chat-inner {
            position: relative;
        }

        .chat .chat-arrow {
            content: '';
            position: absolute;
            top: .35rem;
        }

        .chat .chat-left .chat-arrow {
            width: 0;
            height: 0;
            border-width: .15rem .31rem .15rem 0;
            border-style: solid;
            border-color: transparent #F3F3F3 transparent transparent;
            left: -0.28rem;
        }

        .chat .chat-right .chat-arrow {
            width: 0;
            height: 0;
            border-width: .15rem 0 .15rem .31rem;
            border-style: solid;
            border-color: transparent transparent transparent #1AA1F6;
            right: -0.28rem;
        }

        .chat .chat-left .chat-content {
            font-size: .35rem;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            border-radius: .14rem;
            min-height: 1rem;
            position: relative;
            max-width: 90%;
            word-break: break-all;
            word-wrap: break-word;
            margin-top: .3rem;
        }

        .chat .chat-left .chat-content .body {
            line-height: .59rem;
            padding: .3rem .29rem .3rem .29rem;
            border-radius: .14rem;
        }

        .body-by {
            font-size: .3rem;
        }

        .chat .chat-left .icon {
            position: relative;
            min-width: 1.8rem;
            height: 1.11rem;
        }

        .chat .chat-left .icon .iconhron {
            position: absolute;
            width: 1.11rem;
            height: 1.11rem;
            left: 0px;
            bottom: 0px;
            background: url(../../image/icon/icon_chat_lefthorn.png);
            background-position: center center;
            background-size: .61rem .61rem;
            background-repeat: no-repeat;
        }

        .chat .chat-left .icon .iconhrons {
            position: absolute;
            width: 1.11rem;
            height: 1.11rem;
            left: 0px;
            bottom: 0px;
            background: url(../../image/icon/icon_chat_lefthorn.gif);
            background-position: center center;
            background-size: .61rem .61rem;
            background-repeat: no-repeat;
        }

        .chat .chat-right .chat-content {
            font-size: .35rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            border-radius: .14rem;
            min-height: 1rem;
            position: relative;
            max-width: 90%;
            word-break: break-all;
            word-wrap: break-word;
            margin-top: .3rem;
        }

        .chat .chat-right .chat-content .body {
            line-height: .59rem;
            padding: .3rem .29rem .3rem .29rem;
            border-radius: .14rem;
        }

        .chat .chat-right .icon {
            position: relative;
            min-width: 1.8rem;
            height: 1.11rem;
        }

        .chat .chat-right .icon .iconhron {
            position: absolute;
            width: 1.11rem;
            height: 1.11rem;
            right: 0px;
            bottom: 0px;
            background: url(../../image/icon/icon_chata_righthorn.png);
            background-position: center center;
            background-size: .61rem .61rem;
            background-repeat: no-repeat;
        }

        .chat .chat-right .icon .iconhrons {
            position: absolute;
            width: 1.11rem;
            height: 1.11rem;
            right: 0px;
            bottom: 0px;
            background: url(../../image/icon/icon_chata_righthorn.gif);
            background-position: center center;
            background-size: .61rem .61rem;
            background-repeat: no-repeat;
        }

        .chat .chat-content .body img {
            max-width: 80%;
            display: -webkit-inline-box;
        }

        .picbody img {
            height: .53rem;
            width: .53rem;
            display: list-item;
            vertical-align: middle;
        }

        .chat .chat-status {
            position: relative;
            width: 1.11rem;
            height: 1.11rem;
            line-height: 1.11rem;
            text-align: center;
        }

        .chat .chat-status .iconfont {
            position: absolute;
            width: 1.11rem;
            height: 1.11rem;
            left: 0px;
            bottom: 0px;
            background: url(../../image/icon/icon_fail.png);
            background-position: center center;
            background-size: .61rem .61rem;
            background-repeat: no-repeat;
        }

        .chat .chat-left .chat-status {
            top: .3rem;
            left: 0.5rem;
            float: left;
        }

        .chat .chat-status .badge {
            width: .13rem;
            height: .13rem;
            border-radius: 50%;
            background-color: #ff2600;
            text-decoration: none;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .chat .chat-status .times {
            font-size: .32rem;
            font-weight: 400;
            color: rgba(153, 150, 150, 1);
            line-height: .5rem;
        }

        .chat .chat-left .chat-media {
            width: 1.11rem;
            float: left;
        }

        .chat .chat-left .chat-inner {
            max-width: 80%;
        }

        .chat .chat-left .chat-content {
            background: rgba(243, 243, 243, 1);
            float: left;
            left: 0.5rem;
        }

        .chat .chat-left .chat-contentimg {
            background: rgba(243, 243, 243, 0);
            float: left;
            left: 0.5rem;
            margin-left: .2rem;
        }

        .chat .chat-left .chat-status .badge {
            position: absolute;
            z-index: 99;
            top: 0;
            left: .29rem;
        }

        .chat .chat-left .chat-status .times {
            position: absolute;
            z-index: 99;
            bottom: 0;
            left: .29rem;
        }

        .chat .chat-right .chat-media {
            width: 1.11rem;
            float: right;
        }

        .chat .chat-right .chat-inner {
            float: right;
            max-width: 80%;
        }

        .chat .chat-right .chat-content {
            background: rgba(26, 161, 246, 1);
            right: 0.5rem;
            float: right;
        }

        .chat .chat-right .chat-contentimg {
            background: rgba(243, 243, 243, 0);
            float: right;
            right: 0.5rem;
            margin-right: .2rem;
        }

        .chat .chat-right .chat-status {
            float: right;
            top: .3rem;
            right: 0.5rem;
        }

        .chat .chat-right .chat-status .badge {
            position: absolute;
            z-index: 99;
            top: 0;
            right: .29rem;
        }

        .chat .chat-right .chat-status .times {
            position: absolute;
            z-index: 99;
            bottom: 0;
            right: .29rem;
        }

        .list-enter-active,
        .list-leave-active {
            transition: all 1s;
        }

        .list-enter,
        .list-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <section class="chat" v-cloak>
        <div class="record" v-if="record==1">
            <div class="upper" v-if="release==0">
                <img src="../../image/icon/iconupper.gif" alt="上滑取消发送" />
                <div class="title">上滑取消发送</div>
            </div>
            <div class="release" v-if="release==1">
                <img src="../../image/icon/iconrelease.png" alt="松开手指取消发送" />
                <div class="title">松开手指取消发送</div>
            </div>
        </div>
        <div class="chat-item" v-for="(chats,index) in chat" :class="chats.direction=='send'?'chat-right':'chat-left'">
            <div class="chat-header" v-if="chats.time!=null"><span>{{chats.time|formatTime}}</span></div>
            <div class="chat-media" @click="fnOpenInfo(chats.conversationId,chats.messageId,'');">
                <img src="../../image/defaults/default_pic.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <!-- 消息发送状态 -->
                <div class="chat-status" v-if="chats.direction=='send'">
                    <i class="iconfont icon-correct"></i>
                </div>
                <div class="chat-status" v-if="chats.direction=='send'&&chats.body.type=='voice'">
                    <!-- 语音是否已读 -->
                    <!-- <div class="badge" v-if="chats.isReadAcked==false"></div> -->
                    <div class="times">{{chats.body.duration}}``</div>
                </div>
                <!-- 文本消息 -->
                <div class="chat-content" v-if="chats.body.type=='text'">
                    <div class="chat-arrow"></div>
                    <div class="body picbody" v-html="translateText(chats.body.text)"></div>
                </div>
                <!-- 语音消息 -->
                <div class="chat-content" v-if="chats.body.type=='voice'" @click="fnPlayVoice(index,chats.body.localPath,chats.body.remotePath,chats.conversationId,chats.chatType,chats.messageId);">
                    <div class="chat-arrow"></div>
                    <div class="icon">
                        <div class="iconhron" :class="{iconhrons:chats.ext.isShow==true}"></div>
                    </div>
                </div>
                <div class="chat-status" v-if="chats.direction!='send'&&chats.body.type=='voice'">
                    <!-- 语音是否已读 -->
                    <div class="badge" v-if="chats.isReadAcked==false"></div>
                    <div class="times">{{chats.body.duration}}``</div>
                </div>
                <!-- 消息发送状态 -->
                <div class="chat-status" v-if="chats.direction!='send'">
                    <i class="iconfont icon-correct"></i>
                </div>
            </div>
        </div>
<!--         <div class="chat-item chat-right">-->
<!--            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">-->
<!--                <img src="../../image/test/test_wbq.png" />-->
<!--            </div>-->
<!--            <div class="chat-inner flex-wrap">-->
<!--                <div class="chat-status">-->
<!--                    <i class="iconfont icon-info"></i>-->
<!--                </div>-->
<!--                <div class="chat-contentimg">-->
<!--                    <img src="../../image/defaults/default_pic.png" />-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- <div class="chat-item chat-left">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/defaults/default_pic.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">你知道昨天下雨了吗</div>
                </div>
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
            </div>
        </div>
        <div class="chat-item chat-right">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/test/test_wbq.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-status">
                    <i class="iconfont icon-info"></i>
                </div>
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">我知道昨天下雨了的，还刮风然后我还淋了雨</div>
                </div>
            </div>
        </div>

        <div class="chat-item chat-left">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/test/test_mr.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="icon">
                        <div class="iconhron"></div>
                    </div>
                </div>
                <div class="chat-status">
                    <div class="badge"></div>
                    <div class="times">20s</div>
                </div>
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
            </div>
        </div>
        <div class="chat-item chat-right">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/test/test_wbq.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
                <div class="chat-status">
                    <div class="badge"></div>
                    <div class="times">21s</div>
                </div>
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="icon">
                        <div class="iconhron"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="chat-item chat-left">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/defaults/default_pic.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">我知道昨天下雨了的，还刮风然后我还淋了雨</div>
                </div>
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
            </div>
        </div>
        <div class="chat-item chat-right">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/test/test_wbq.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-status">
                    <i class="iconfont icon-info"></i>
                </div>
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">我知道昨天下雨了的，还刮风然后我还淋了雨</div>
                </div>
            </div>
        </div>

        <div class="chat-item chat-left">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/defaults/default_pic.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">
                        <div class="body-title">
                            泰翔商务楼
                        </div>
                        <div class="body-by">
                            北京市海淀区龙翔路甲1号
                        </div>
                        <img src="../../image/defaults/default_zbbmap.png" alt="" />
                    </div>
                </div>
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
            </div>
        </div>
        <div class="chat-item chat-right">
            <div class="chat-media" @click="fnOpenInfo('王宝宝',1,'../../image/test/test_wbq.png');">
                <img src="../../image/defaults/default_pic.png" />
            </div>
            <div class="chat-inner flex-wrap">
                <div class="chat-status">
                    <i class="iconfont icon-correct"></i>
                </div>
                <div class="chat-content">
                    <div class="chat-arrow"></div>
                    <div class="body">
                        <div class="body-title">
                            泰翔商务楼
                        </div>
                        <div class="body-by">
                            北京市海淀区龙翔路甲1号
                        </div>
                        <img src="../../image/defaults/default_zbbmap.png" alt="" />
                    </div>
                </div>
            </div>
        </div> -->
    </section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/easeChat.js"></script>
<!-- 表情转换js -->
<script type="text/javascript" src="../../script/emotion.js"></script>
<script type="text/javascript">
    var UIChatBox, frameHeight, eRecord, eUpper, eRelease, inputBarHeightsum = 50,
        isSwice = false,
        isShow = false;
    apiready = function() {
        fnInitVue();
    };

    function fnInitVue() {
        window.ListVue = new Vue({
            el: '.chat',
            data: {
                chat: [],
                record: 0, //点击录音状态
                release: 0 //取消显示状态
            },
            mounted: function() {
                this.$nextTick(function() {
                    //初始化数据
                    fnInit();
                    //设置页面到最顶部
                    resizeFrame(inputBarHeightsum);
                    //获取环信聊天消息
                    fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type);
                    //初始化下拉加载
                    fnsetRefreshHeaderInfo();
                });
            },
            methods: {
                fnPlayVoice: function(index, localPath, remotePath, conversationid, type, messageid) {
                    // console.log(this.chat[index].ext.isShow)
                    // 判断是否是第一次点击播放录音去掉红色提示圆圈，
                    // 设置为已读必须满足是接收消息，
                    // 已经点击的无法在点击改变
                    // （这个功能目前来说没有字段可以实现暂时放着）
                    // if (this.chat[index].isReadAcked == false && this.chat[index].direction == "receive") {
                    //     this.chat[index].isReadAcked = true;
                    //     // 将指定消息设置为已读
                    //     // fnMarkMessageAsRead(conversationid, type, messageid)
                    //     return;
                    // }
                    //  此块安卓会出现问题，发送语音消息的时候，录音网络地址没有
                    //  所有你发送一次录音正确，
                    //  在发送都会出现是前一次的录音
                    //  这块录音建议发送到自己服务器上然后在播放录音
                    if (remotePath != '') {
                        api.download({
                            url: remotePath,
                            savePath: 'fs://easeChat_chat.amr',
                            report: false,
                            cache: true,
                            allowResume: false
                        }, function(ret, err) {
                            if (ret.state == 1) {
                                console.log(11111)
                                    // 只打开点击的录音，其他的都关闭
                                for (var i = 0; i < window.ListVue.chat.length; i++) {
                                    if (i == index) {
                                        window.ListVue.chat[index].ext.isShow = true;
                                        // // 播放语音
                                        api.startPlay({
                                            path: ret.savePath
                                        }, function(ret, err) {
                                            if (ret) {
                                                window.ListVue.chat[index].ext.isShow = false;
                                                //播放完以后自动停止
                                                api.stopPlay();
                                            } else {
                                                toast("公共卫生：" + JSON.stringify(err));
                                            }
                                        });
                                    } else {
                                        window.ListVue.chat[i].ext.isShow = false;
                                    }
                                }
                            } else {
                                tost("公共卫生：" + JSON.stringify(ret));
                            }
                        });
                        return;
                    } else {
                        console.log(2222)
                            // 只打开点击的录音，其他的都关闭
                        for (var i = 0; i < window.ListVue.chat.length; i++) {
                            if (i == index) {
                                window.ListVue.chat[index].ext.isShow = true;
                                // // 播放语音
                                api.startPlay({
                                    path: localPath
                                }, function(ret, err) {
                                    if (ret) {
                                        window.ListVue.chat[index].ext.isShow = false;
                                        //播放完以后自动停止
                                        api.stopPlay();
                                    } else {
                                        toast("公共卫生：" + JSON.stringify(err));
                                    }
                                });
                            } else {
                                window.ListVue.chat[i].ext.isShow = false;
                            }
                        }
                        return;
                    }
                    // console.log(index + "****localPath:" + localPath + "****remotePath:" + remotePath + "****" + conversationid + "****" + type + "****" + messageid)
                },
                fnOpenInfo: function(name, id, img) {
                    api.openWin({
                        name: 'my_info',
                        url: 'widget://html/my/my_info_win.html',
                        slidBackEnabled: true,
                        pageParam: {
                            nickname: '王宝宝',
                            id: 1,
                            img: img
                        }
                    })
                },
                //文本表情转化
                translateText: function(text) {
                    if (text == '' || text == undefined) {
                        return;
                    }
                    msg = text;
                    var emotionObj = emotion;
                    var regx = /\[(.*?)\]/gm;
                    var translateMSg = text.replace(regx, function(math) {
                        var imgSrc = emotionObj[math];
                        if (!imgSrc) {
                            return math;
                        }
                        var img = '<img src="../../res/img/emotion/' + imgSrc + '.png" class="emotion">'
                        return img;
                    })
                    console.log(translateMSg)
                    return translateMSg;
                }
            },
            filters: {
                formatTime: function(v) {
                    return new Date(v).popular();
                }
            }
        })
    }

    function fnInit() {
        UIChatBox = api.require('UIChatBox'); //引用UIChatBox模块
        frameHeight = api.frameHeight; //获取frame高度
        eRecord = $api.byId('record'); //语音弹出dom id
        eUpper = $api.byId('upper');
        eRelease = $api.byId('release');
        fnUIChatBox();
    }

    //调用UIChatBox模块
    function fnUIChatBox() {
        UIChatBox.open({
            placeholder: '',
            autoFocus: false,
            maxRows: 4,
            emotionPath: 'widget://res/img/emotion',
            texts: {
                recordBtn: {
                    normalTitle: '按住 说话',
                    activeTitle: '松开 发送'
                },
                sendBtn: {
                    title: '发送'
                }
            },
            styles: {
                topDivider: {
                    width: 0,
                    color: '#F2F2F2'
                },
                inputBar: {
                    borderColor: '#F2F2F2',
                    bgColor: '#F2F2F2'
                },
                inputBox: {
                    borderColor: '#fff',
                    bgColor: '#fff',
                    boardBgColor: '#fff',
                    topMargin: 8,
                },
                emotionBtn: {
                    normalImg: 'widget://image/icon/icon_chat_expression.png'
                },
                extrasBtn: {
                    normalImg: 'widget://image/icon/icon_chat_plus.png'
                },
                keyboardBtn: {
                    normalImg: 'widget://image/icon/icon_chata_keyboard.png'
                },
                speechBtn: {
                    normalImg: 'widget://image/icon/icon_chat_voice.png',
                    activeImg: 'widget://image/icon/icon_chata_keyboard.png'
                },
                recordBtn: {
                    normalBg: '#eee',
                    activeBg: '#aaa',
                    color: '#666',
                    size: 16
                },
                indicator: {
                    target: 'both',
                    color: '#c4c4c4',
                    activeColor: '#9e9e9e'
                },
                sendBtn: {
                    titleColor: '#fff',
                    bg: '#00acff',
                    activeBg: '#00acff',
                    titleSize: 13
                }
            },
            extras: {
                titleSize: 12,
                titleColor: '#999',
                btns: [{
                    title: '图片',
                    normalImg: 'widget://image/icon/icon_chat_img.png',
                    activeImg: 'widget://image/icon/icon_chat_img.png'
                }, {
                    title: '拍照',
                    normalImg: 'widget://image/icon/icon_chat_picture.png',
                    activeImg: 'widget://image/icon/icon_chat_picture.png'
                }, {
                    title: '位置',
                    normalImg: 'widget://image/icon/icon_chat_bmap.png',
                    activeImg: 'widget://image/icon/icon_chat_bmap.png'
                }, {
                    title: '视频',
                    normalImg: 'widget://image/icon/icon_chat_video.png',
                    activeImg: 'widget://image/icon/icon_chat_video.png'
                }]
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType === "send") {
                    // 发送文本
                    fnSendText(ret.msg);
                }
                if (ret.eventType === "clickExtras" && ret.index === 0) {
                    // 发送图片
                    fnSendImage();
                }
                if (ret.eventType === "clickExtras" && ret.index === 1) {
                    // 拍照
                    fnCamera();
                }
                if (ret.eventType === "clickExtras" && ret.index === 2) {
                    // 发送位置
                    fnSendBmap()
                }
                if (ret.eventType === "clickExtras" && ret.index === 3) {
                    // 发送视频
                    fnSendViode()
                }
            } else {
                toast('公共卫生：！' + JSON.stringify(err));
            }
        });

        //监听输入框弹动事件
        UIChatBox.addEventListener({
            target: 'inputBar',
            name: 'move'
        }, function(ret, err) {
            if (ret) {
                inputBarHeightsum = ret.inputBarHeight + ret.panelHeight;
                resizeFrame(inputBarHeightsum);
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });

        //监听点击录音按钮功能、按下录音按钮
        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'press'
        }, function(ret, err) {
            if (ret) {
                // 显示浮动的录音状态
                window.ListVue.record = 1;
                // 打开震动
                api.notification({
                    vibrate: [10, 50]
                });
                // 判断麦克风是否禁用
                var resultList = api.hasPermission({
                    list: ['microphone']
                });
                if (resultList[0]['granted']) {
                    fnOpenAudio();
                    isShow = true; //暂停可以发送
                } else {
                    api.alert({
                        title: '麦克风没有准备好',
                        msg: '请检查是否允许录音',
                    }, function() {
                        fnOpenAudio();
                        isShow = true; //暂停可以发送
                    });
                }
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });

        //监听点击录音按钮功能、松开录音按钮发送语音消息
        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'press_cancel'
        }, function(ret, err) {
            if (ret) {
                window.ListVue.record = 0;
                if (isShow) {
                    fnStopsendAudio(); //暂停录音并且发送
                    isShow = false; //回到初始状态
                }
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });

        //监听点击录音按钮功能、按下录音按钮后，从按钮移出
        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'move_out'
        }, function(ret, err) {
            if (ret) {
                window.ListVue.record = 1;
                window.ListVue.release = 1;
                isShow = false;
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });

        //监听点击录音按钮功能、按下录音按钮后，从按钮移出并松开按钮
        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'move_out_cancel'
        }, function(ret, err) {
            if (ret) {
                window.ListVue.record = 0;
                window.ListVue.release = 0;
                isShow = false; //暂停取消发送
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });

        //监听点击录音按钮功能、move_out 事件后，重新移入按钮区域
        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'move_in'
        }, function(ret, err) {
            if (ret) {
                window.ListVue.record = 1;
                window.ListVue.release = 0;
                isShow = true; //暂停取消发送
            } else {
                toast("公共卫生：" + JSON.stringify(err));
            }
        });
    }


    // 定义一个全局的聊天数组
    var message_data = [];

    function fnsetRefreshHeaderInfo() {
        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#fff',
            textColor: '#ccc',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            api.refreshHeaderLoadDone();
            if (ret) {
                //获取第一条（最早的一条）
                if (message_data.length > 0) {
                    var _lastid = message_data[0].messageId;
                    // 调取环信聊天消息接口
                    fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type, true, _lastid);
                }
            } else {
                toast("公共卫生：" + err.msg);
            }
        });
    }

    // 加载数据
    function fnLoadMessageFromDB(_ret, _loadMore) {
        if (_ret.messages.length == 0) {
            toast("没有更多了");
            return;
        }
        // 对数据进行渲染
        fnUpdateMessageFromDB(_ret.messages, _loadMore);
    }

    //渲染数据
    function fnUpdateMessageFromDB(data_, _loadMore) {
        console.log(JSON.stringify(data_))
        var eMessageFromDB = data_;
        //新旧数组拼接
        message_data = data_.concat(message_data);
        // 定义俩条消息超过俩分钟间隔显示发送时间
        for (var i = 0; i < eMessageFromDB.length; i++) {
            if (i == 0) {
                eMessageFromDB[i].time = eMessageFromDB[i].localTime;
            } else {
                var timevalue = eMessageFromDB[i].localTime - eMessageFromDB[i - 1].localTime;
                if (timevalue > 120000) {
                    eMessageFromDB[i].time = eMessageFromDB[i].localTime;
                }
            }
        }

        if (_loadMore) {
            // 有追加数据，在原有的数据前面连接追加数据
            window.ListVue.chat = eMessageFromDB.concat(window.ListVue.chat);
        } else {
            //没有追加直接显示
            window.ListVue.chat = eMessageFromDB;
        };
    };

    //追加一条最新数据
    function fnAddanew(data_, addanew_) {
        var eMessageFromDB = data_;
        //新旧数组拼接
        message_data = data_.concat(message_data);
        // 定义俩条消息超过俩分钟间隔显示发送时间
        if (message_data.length != 0) {
            var timevalue = parseFloat(eMessageFromDB[0].localTime) - parseFloat(message_data.pop().localTime);
            if (timevalue > 120000) {
                eMessageFromDB[0].time = eMessageFromDB[0].localTime;
            }
        } else {
            eMessageFromDB[0].time = eMessageFromDB[0].localTime;
        }

        if (addanew_) {
            // 追加最新一条
            window.ListVue.chat = window.ListVue.chat.concat(eMessageFromDB);
            console.log(inputBarHeightsum)
                //设置页面到最顶部
            resizeFrame(inputBarHeightsum);
        }
    }

    //清空消息
    function fnCloseNew() {
        message_data = [];
        window.ListVue.chat = message_data;
    }

    function resizeFrame(height) {
        console.log(height)
        api.setFrameAttr({
            name: api.frameName,
            rect: {
                marginLeft: 0,
                marginRight: 0,
                marginTop: api.pageParam.headerH,
                h: frameHeight - height
            }
        });
        pageDown(200);
    }

    //滑动到底部
    function pageDown(time) {
        setTimeout(function() {
            api.pageDown({
                bottom: true,
                animate: true
            })
        }, time || 0)
    }

    // 打开录音语音
    function fnOpenAudio() {
        api.startRecord({
            path: 'fs://easeChat_chat.amr'
        });
    }

    // 停止并且发送录音消息
    function fnStopsendAudio() {
        api.stopRecord(function(ret, err) {
            if (ret) {
                if (ret.duration > 0) {
                    //调取环信发送语音接口
                    fnEaseChatSendVoice(api.pageParam.conversationid, api.pageParam.type, ret.path, $api.getStorage('user'), api.pageParam.conversationid, ret.duration);
                } else {
                    toast('公共卫生:录音时间太短了，请从新录音');
                }
            } else {
                toast('公共卫生:', JSON.stringify(err));
            }
        });
    }

    // 发送文本消息
    function fnSendText(msg) {
        // 调取环信发送文本接口
        fnEaseChatSendText(api.pageParam.conversationid, api.pageParam.type, msg, $api.getStorage('user'), api.pageParam.conversationid)
    }
</script>

</html>
